<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app">
    <component1></component1>
</div>

<template id="component1">
    <div>
        <h2>我的第一个组件</h2>
        <component2></component2>
    </div>
</template>

<template id="component2">
    <div>
        <h2>我的第二个组件</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 注意：全局组件不存在父组件和子组件的，因为全局组件在实例里的任何地方都可以使用
     * 那什么是父组件和子组件呢，其实就是组件里通过components再嵌套注册组件，嵌套注册组件的就是子组件，在哪个组件上注册就可以在哪个上使用
     *
     */
    const component1 = {
        template: '#component1',
        components: {
            'component2': {
                template: "#component2"
            }
        }
    }

    const app = new Vue({
        el: '#app',
        components: {
            'component1': component1
        }
    })

</script>
</html>